<template>
  <div class="container">
    <div>
      <a-space style="display: flex; justify-content: space-between">
        <div>
          <a-space>
            <div class="search-item"
              ><a-space
                ><a-input-search
                  search-button
                  @search="search"
                  v-model="searchName"
                  placeholder="请输入货架名称" /></a-space
            ></div>
            <div
              ><a-space
                ><a-input-search
                  search-button
                  @search="search"
                  v-model="searchNumber"
                  placeholder="请输入货架编号" /></a-space
            ></div>
            <a-button type="outline" @click="reset">
              <template #icon> <icon-refresh /> </template> 重置
            </a-button>
          </a-space>
        </div>
        <div>
          <a-button type="primary" @click="handleClick"> 新增货架 </a-button>
        </div>
      </a-space>
    </div>
    <a-divider />
    <tableTurn :tableData="getData" :args="args" ref="tableRef">
      <a-table-column :width="80" align="center">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        title="货架编号"
        :width="150"
        data-index="number"
        align="center"
      />
      <a-table-column
        title="货架名称"
        :width="150"
        data-index="name"
        align="center"
        :ellipsis="true"
        :tooltip="{
          position: 'top',
        }"
      />
      <a-table-column
        :width="150"
        title="货架属性"
        data-index="attribute"
        align="center"
      />

      <a-table-column
        title="所在位置"
        :width="150"
        data-index="location"
        align="center"
        :ellipsis="true"
        :tooltip="{
          position: 'top',
        }"
      />

      <a-table-column
        title="货架层数"
        :width="150"
        data-index="tier"
        align="center"
      />

      <a-table-column
        title="货架格数"
        :width="150"
        data-index="lattice"
        align="center"
      />

      <a-table-column title="货架尺寸" align="center">
        <a-table-column title="长（m）" data-index="long" align="center" />

        <a-table-column title="宽（m）" data-index="wide" align="center" />

        <a-table-column title="高（m）" data-index="high" align="center" />
      </a-table-column>

      <a-table-column
        :width="150"
        title="货架最大承重（kg）"
        data-index="weight"
        align="center"
        ><template #cell="{ record }">
          <span>{{ record.weight }}</span>
        </template>
      </a-table-column>

      <a-table-column
        :width="150"
        title="备注"
        data-index="remark"
        align="center"
        :ellipsis="true"
        :tooltip="{
          position: 'top',
        }"
      />

      <a-table-column fixed="right" :width="150" title="操作" align="center"
        ><template #cell="{ record }">
          <a-space>
            <a-tooltip content="详情">
              <IconFont
                type="icon-details-def"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer',
                }"
                @click="goDetails(record.id)"
              />
            </a-tooltip>
            <a-tooltip content="编辑">
              <IconFont
                type="icon-edit"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer',
                }"
                @click="goEdit(record)"
              />
            </a-tooltip>
            <a-tooltip content="删除">
              <a-popconfirm
                content="确认删除？"
                type="error"
                @ok="deleteItem(record.id)"
              >
                <IconFont
                  type="icon-delete"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer',
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </a-space>
        </template>
      </a-table-column>
    </tableTurn>
    <addShelf
      v-model:visible="modalVisible"
      @addShelfForm="addShelfForm"
      :formData="UnitForm"
      :createId="createId"
      :title="titleModel"
    />
  </div>
</template>

<script lang="ts" setup>
  import {
    computed,
    ref,
    reactive,
    onMounted,
    h,
    watchEffect,
    nextTick,
  } from 'vue';
  import { useRouter } from 'vue-router';
  import { postShelves } from '@/api/inventory-management/warehouse-management/shelf-list/index';
  import {
    putShelves,
    delShelves,
    GetShelvesAll,
  } from '@/api/inventory-management/warehouse-management/shelf-list/index';
  import miiter from '@/utils/mitt';
  import addShelf from './components/add-shelf.vue';

  const props = withDefaults(
    defineProps<{
      getTableData: any;
    }>(),
    {}
  );
  const tableRef = ref();
  const titleModel = ref();
  const router = useRouter();
  const createId = ref(0);
  const modelVisible = ref(false);
  const getUnitData = ref(props.getTableData);
  // 表格配置
  const args = reactive({
    stripe: true,

    scroll: {
      x: 2000,
      y: 480,
    },
    bordered: {
      headerCell: true,
    },
    rowKey: 'name', // 批量选择按钮以客户名称来作为key
  });

  miiter.on('shelvesId', (val: any) => {
    createId.value = val;
    nextTick(() => {
      tableRef.value.loadData();
    });
  });
  const UnitForm = ref();

  let modalVisible = ref(false);

  // 储存当前行的数据
  const currForm = reactive({
    list: {},
  });

  const handleClick = () => {
    if (!createId.value) return;
    UnitForm.value = {
      id: undefined,
      pid: undefined,
      name: '',
      number: '',
      long: undefined,
      wide: undefined,
      high: undefined,
      lattice: undefined,
      tier: undefined,
      weight: undefined,
      location: '',
      attribute: undefined,
      remark: '',
      state: 1,
      mark: 2,
    };
    titleModel.value = '新增货架';
    modalVisible.value = true;
  };

  const searchName = ref();
  const searchNumber = ref();
  const getData = async (page?) => {
    try {
      let data = {};
      if (searchName.value) data.name = searchName.value;
      if (searchNumber.value) data.number = searchNumber.value;
      if (createId.value !== '') data.pid = createId.value;
      const res = GetShelvesAll({
        ...page,
        ...data,
      });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  const addShelfForm = async (data: any, key: string) => {
    if (key === 'add') {
      await postShelves({ ...data });
      tableRef.value.loadData();
    } else {
      await putShelves({ ...data });
      tableRef.value.loadData();
    }
  };

  // 前往编辑
  const goEdit = (record: any) => {
    titleModel.value = '修改货架';
    modalVisible.value = true;
    UnitForm.value = record;
  };

  const deleteItem = async (id: number) => {
    try {
      await delShelves({ id });
      tableRef.value.loadData();
    } catch (error: unknown) {
      console.log(error);
    }
  };

  watchEffect(() => {
    getUnitData.value = props.getTableData;
  });

  const goDetails = (id: number) => {
    router.push({
      name: 'ShelfListDetails',
      query: { id },
    });
  };

  // 点击搜索按钮
  const search = () => {
    tableRef.value.refreshPaging();
    tableRef.value.loadData();
  };

  // 点击重置
  const reset = () => {
    searchName.value = '';
    searchNumber.value = '';
    tableRef.value.refreshPaging();
    tableRef.value.loadData();
  };

  // 监听键盘回车，按了回车也会查询
  const keyDown = (e: any) => {
    if (e.keyCode === 13) {
      tableRef.value.loadData();
    }
  };

  defineExpose({ handleClick });
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 0px 20px;
    // margin-bottom: 20px;

    .content {
      padding: 20px 10px;
    }
    .state-item-Y {
      width: 30px;
      height: 30px;
      font-size: 12px;
      border: 1px solid rgba(148, 191, 255, 1);
      background-color: rgba(232, 243, 255, 1);
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #3d7eff;
    }
    .state-item-N {
      color: #f53f3f;
      width: 30px;
      height: 30px;
      font-size: 12px;
      border: 1px solid rgba(251, 172, 163, 1);
      background-color: rgba(255, 236, 232, 1);
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  // 扩展行的样式

  // .space-unit {
  //   background-color: var(--color-bg-2);
  //   border-radius: 4px;
  // }

  // .title-fix {
  //   margin: 0 0 12px 0;
  //   font-size: 14;
  // }
  // :deep(.section-title) {
  //   margin: 0 0 12px 0;
  //   font-size: 14px;
  // }
</style>
